<script setup>
  import Header from './Header.vue';
  import { defineSchedule } from '../store/scheduleStore';
  import { onUpdated, onMounted, compile } from 'vue';
  import instance from '../js/axios';
  import { defineUser } from '../store/logUserStore';
  
  let schedule = defineSchedule()
  let sysUser = defineUser()
  
  onMounted(function() {
    showSchedule()
  })

  async function showSchedule() {
    let response = await instance.get('/schedule/findAllSchedule', {params:{uid: sysUser.uid}})
    console.log(response)
    
    schedule.itemList = response.data.data
  }

  function addScheduleInput() {
    // 获取表格，这种方式是不行的，这种方式是直接操作dom树的，这种新增不会被Vue的响应式系统追踪
    // let tableEle = document.getElementById("tableEle")
    // console.log(tableEle)
    // let newTr = document.createElement('tr')
    // console.log(newTr)
    // tableEle.appendChild(newTr)

    // 通过数据驱动视图更新
    schedule.itemList.push({
      sid: null,
      uid: sysUser.uid,
      title: '',
      completed: 0
    })
  }

  async function deleteBySid(sid, index){
    if(confirm("确定删除吗？")) {
      if(null === sid) {
        // 说明是新增的行，只需删除行，不用删除库
        schedule.itemList.splice(index, 1)
      } else{
        await instance.get("/schedule/deleteBySid", {params:{sid: sid}})
        showSchedule()
      }
    } 
  }

  async function addOrUpdateSchedule(index) {
    let {data} = await instance.post('/schedule/addOrUpdateSchedule', schedule.itemList[index])
    alert(data.message)

  }
  

</script>

<template>
  <div>
    <h3 class="ht">您的日程如下</h3>
    <Header></Header>
    <table id="tableEle" class="tab" cellspacing="0px">
      <tr class="ltr">
        <th>编号</th>
        <th>内容</th>
        <th>进度</th>
        <th>操作</th>
      </tr>
      <tr class="ltr" v-for="item, index in schedule.itemList" v-bind:key="index">
        <td v-text="index + 1"></td>
        <td><input v-bind:type="'text'" v-model="item.title"></td>
        <td>
          <input type="radio" v-model="item.completed" value="1">已完成
          <input type="radio" v-model="item.completed" value="0">未完成
        </td>
        <td class="buttonContainer">
          <button class="btn1" @click="deleteBySid(item.sid, index)">删除</button>
          <button class="btn1" @click="addOrUpdateSchedule(index)">保存</button>
        </td>
      </tr>
      <tr class="ltr buttonContainer" >
        <td colspan="4">
          <button class="btn1" v-on:click="addScheduleInput()">新增日程</button>
        </td>
      </tr>
    </table>
  </div>
</template>
<style scoped>
  .ht{
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
  }
  .tab{
    width: 80%;
    border: 5px solid cadetblue;
    margin: 0px auto;
    border-radius: 5px;
    font-family: 幼圆;
  }
  .ltr td{
    border: 1px solid powderblue;
  }
  .ipt{
    border: 0px;
    width: 50%;
  }
  .btn1{
    border: 2px solid powderblue;
    border-radius: 4px;
    width:100px;
    background-color: antiSuewhite;
  }
  #usernameMsg , #userPwdMsg {
    color: gold;
  }
  .buttonContainer{
    text-align: center;
  }
</style>
